<template>
  <!-- 币币账户list   Mention提币-->
  <div>
    <div class="list-box">
      <div class="lump-box coin-box">{{ item.AccountName }}</div>
      <div class="lump-box useable-box">{{ $coin(item.Coin) }}</div>
      <div class="lump-box frost-box">{{ $coin(item.FrostCoin) }}</div>
      <div class="lump-box ttm-box">
      123
        <span class="tinge-text">&nbsp;CNY</span>
      </div>

      <div class="lump-box action-box">
        <span class="action-span cursor" @click="changeMoneyClick(item.AccountType)">
          {{
          $t("asset.charge_money")
          }}
        </span>
        <span class="action-span cursor" @click="MentionClick(item.AccountType)">
          {{
          $t("asset.mention_money")
          }}
        </span>
        <span class="action-span cursor" @click="transferVisible=true">划转</span>
        <router-link to="/exchange">
          <span class="action-span cursor">交易</span>
        </router-link>
      </div>
    </div>
    <!-- 
    --充币卡片 isShow 判断隐藏显示
    -->
    <div class="dialog-box" v-show="isShow">
      <div class="chunk-box">
        <template v-if="item.AccountName!='BTC'">
          <p class="chunk-box-hint">{{ $t("asset.channel_name") }}</p>
          <div class="support-box">
            <button
              v-for="(info,index) in ServerAddressInfo"
              :key="index"
              class="coin-btn cursor"
              :disabled="info.IsOpen*1==0"
              :class="info.IsOpen*1==0?'btnDis':(currentChain==info.ChannelName?'coinIsClick':'')"
              @click="coinClick(index)"
            >
              {{info.ChannelName}}
              <template
                v-if="info.IsOpen*1==0?false:currentChain==info.ChannelName"
              >
                <i class="triangle-bottomright"></i>
                <i class="el-icon-check"></i>
              </template>
            </button>
          </div>
        </template>

        <p class="chunk-box-hint">{{ $t("asset.fill_address") }}</p>
        <div class="adress-box">
          <input type="text" class="copy-input" ref="adress" :value="currentAdress" />
          <p>
            <span class="adress-right-text cursor" @click="copyBtn">
              {{
              $t("asset.copy")
              }}
            </span>
            <!-- <span >二维码</span> -->
            <el-popover placement="right" width="98" trigger="click" :visible-arrow="false">
              <span class="adress-right-text cursor" slot="reference">
                {{
                $t("asset.QR_code")
                }}
              </span>
              <canvas class="erwei_img" ref="canvas"></canvas>
            </el-popover>
          </p>
        </div>
      </div>

      <div class="chunk-box-bottom dis-select">
        <p class="chunk-box-bottom-hint">{{ $t("asset.warm_prompttview") }}</p>
        <ul class="hint-ul">
          <li class="hint-li">{{ $t("asset.inform_hint") }}</li>
          <li class="hint-li">{{ $t("asset.safety_hint") }}</li>
        </ul>
      </div>
    </div>
    <!-- 
    --提币卡片 isShowMention 判断隐藏显示
    -->
    <div class="dialog-box" v-show="isShowMention">
      <div class="risk-hint">
        <i class="el-icon-warning"></i>
        <div class="header-hint">
          <p>{{ $t("asset.channer_risk") }}</p>
          <p>{{ $t("asset.channer_hint") }}</p>
        </div>
      </div>
      <template v-if="item.AccountName!='BTC'">
        <p class="chunk-box-hint">{{ $t("asset.channel_name") }}</p>
        <div class="support-box">
          <button
            v-for="(info,index) in ChannelInfo.AssetInfo"
            :key="index"
            class="coin-btn cursor"
            :disabled="info.IsOpen==0"
            :class="info.IsOpen==0?'btnDis':(mentionChain==info.ChannelName?'coinIsClick':'')"
            @click="mentionClick(index)"
          >
            {{info.ChannelName}}
            <template
              v-if="info.IsOpen*1==0?false:mentionChain==info.ChannelName"
            >
              <i class="triangle-bottomright"></i>
              <i class="el-icon-check"></i>
            </template>
          </button>
        </div>
      </template>

      <!-- 表单 -->
      <el-form
        label-position="top"
        label-width="80px"
        :model="menthionForm"
        :rules="methionrules"
        ref="methionform"
        class="meation-form"
      >
        <div class="toup-adress-hint">
          <span>{{ $t("asset.mention_address") }}</span>
          <div class="toup-adress-hint">
            <div class="toup-adress-hint">
              <span>{{ $t("asset.available_quantity") }}:&nbsp;</span>
              <span class="color-text">{{ $coin(ChannelInfo.Coin) }}</span>
            </div>
            <div class="toup-adress-hint right-last-box">
              <span>{{ $t("asset.quota") }}:&nbsp;</span>
              <span>{{ ChannelInfo.CoinMax }}</span>
            </div>
          </div>
        </div>
        <el-form-item prop="adress">
          <el-input v-model="menthionForm.adress"></el-input>
        </el-form-item>
        <div class="toup-adress-hint">
          <span>{{ $t("asset.toup") }}</span>
          <span>{{ $t("asset.min_hint") }}: {{ChannelInfo.CoinMin}}</span>
        </div>
        <el-form-item prop="num">
          <el-input v-model="menthionForm.num" @input.native="numInput($event,ChannelInfo.Length)"></el-input>
        </el-form-item>

        <div class="inline-input-box">
          <el-form-item class="inline-item" prop="rate">
            <el-col :span="11">
              <div class="col-test">
                <div class="toup-adress-hint inline-hint-box">
                  <span>{{ $t("asset.service_charge") }}</span>
                  <!-- <span>{{$t("asset.rate")}}:&nbsp;{{pickRate}}%</span> -->
                </div>
                <el-input class="inline-input" v-model="menthionForm.rate" :disabled="true"></el-input>
                <span class="input-hint-cointype">{{ item.AccountName }}</span>
              </div>
            </el-col>
          </el-form-item>
          <el-form-item class="inline-item" prop="autual">
            <el-col :span="11">
              <div class="toup-adress-hint">
                <span>{{ $t("asset.actual_account") }}</span>
              </div>
              <el-input v-model="menthionForm.autual" class="inline-input" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
        </div>

        <div class="toup-adress-foooter">
          <div class="footer-box-left">
            <p class="footer-left-text">{{ $t("asset.inform_hint") }}</p>
            <p class="footer-left-text">{{ $t("asset.safety_hint") }}</p>
          </div>
          <div class="footer-box-right">
            <el-form-item class="footer-inline-item" prop="moneyPsw">
              <el-col :span="4" class="el-col">
                <el-input
                  :type="pwdType?'password':'text'"
                  v-model="menthionForm.moneyPsw"
                  class="footer-inline-input"
                  :placeholder="$t('asset.place_paypsw')"
                >
                  <img
                    slot="suffix"
                    @click="pwdType=!pwdType"
                    class="eye-img"
                    v-if="pwdType"
                    src=""
                    alt
                  />
                  <img
                    slot="suffix"
                    @click="pwdType=!pwdType"
                    class="eye-img"
                    v-else
                    src=""
                    alt
                  />
                </el-input>
              </el-col>
            </el-form-item>
            <el-button
              type="success"
              class="toup-form-btn"
              @click="confirmBtn"
            >{{ $t("message.confirm") }}</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <!--
      -- 划转的dialog弹窗 
      -- 模块内容与组件UserTransfer一致
    -->
    <el-dialog :visible.sync="transferVisible" :lock-scroll="false" top="15vh" width="759px">
      <TransferModule></TransferModule>
    </el-dialog>
  </div>
</template>
<script>
import QRCode from "qrcode";

import TransferModule from "./transfer-list-module";
export default {
  data() {
    return {
      isClick: true,
      isShow: false,
      isShowMention: false,
      pwdType: true,
      userInfo: "",
      ServerAddressInfo: [], // 提币地址列表
      MentionInfo: {}, // 请求回来的提币信息
      menthionForm: {
        adress: "",
        num: "",
        rate: "", // 手续费
        autual: "", // 实到账
        moneyPsw: "" // 密码
      },
      currentChain: "OMNIa",
      currentAdress: "",
      isDialog: 0, //充币：0 提币：1,
      // 用户提币通道信息
      ChannelInfo: {
        AssetInfo: [{ ChannelName: "" }],
        Coin: 0,
        CoinMax: 0,
        CoinMin: 0,
        Length: 8,
        PickRate: 0 //費率
      },
      mentionChain: "OMNIa",
      ChannelId: "", // 当前提币id
      // 提币验证规则
      methionrules: {
        adress: [
          {
            validator: (rule, value, callback) => {
              var myReg = /^\w+$/;
              if (value) {
                if (myReg.test(value)) {
                  callback();
                } else {
                  callback(new Error(`${this.$t("asset.address_err")}`));
                }
              } else {
                callback(new Error(`${this.$t("asset.address_input")}`));
              }
            },
            trigger: "blur"
          }
        ],
        num: [
          {
            validator: (rule, value, callback) => {
              var myReg = /[0-9]/;
              if (value) {
                if (myReg.test(value)) {
                  if (value <= 0) {
                    callback(new Error(`${this.$t("asset.quantity_err")}`));
                  } else {
                    if (value >= this.ChannelInfo.CoinMin) {
                      if (
                        this.menthionForm.autual >= this.ChannelInfo.CoinMax
                      ) {
                        callback(new Error(`${this.$t("asset.coinMax")}`));
                      } else {
                        callback();
                      }
                    } else {
                      callback(new Error(`${this.$t("asset.coinMin")}`));
                    }
                  }
                } else {
                  callback(new Error(`${this.$t("asset.quantity_err")}`));
                }
              } else {
                callback(new Error(`${this.$t("asset.quantity_input")}`));
              }
            },
            trigger: "blur"
          }
        ],
        moneyPsw: [
          {
            validator: (rule, value, callback) => {
              var myReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
              if (value) {
                if (myReg.test(value)) {
                  callback();
                } else {
                  callback(new Error(`${this.$t("asset.paypsw_err")}`));
                }
              } else {
                callback(new Error(`${this.$t("asset.paypsw_input")}`));
              }
            },
            trigger: "blur"
          }
        ]
      },
      // 划转---------支持
      transferVisible: false
    };
  },
  components: {
    TransferModule
  },
  props: ["item", "hasPaypwd", "index", "isOpenIndex"],

  methods: {
    successMsg(msg) {
      this.$message({
        showClose: true,
        message: msg,
        type: "success"
      });
    },
    errorMsg(msg) {
      this.$message.error(msg);
    },
    /*
     *提币按钮的点击，请求数据
     */
    MentionClick(coin) {
      console.log("提币按钮的点击", coin);
      this.isDialog = 1;
      if (!this.isShowMention) {
        if (this.hasPaypwd == 1) {
          this.reqChannel(coin);
        } else {
          const h = this.$createElement;
          this.$notify({
            title: `${this.$t("message.warm_prompt")}`,
            message: h(
              "p",
              { style: "color: #31C0CE" },
              `${this.$t("personal_center.error_psw")}${this.$t(
                "personal_center.hint_set"
              )}`
            )
          });
        }
      }
      /*
       *提币表单的显示
       */
      this.isShow = false;
      if (this.index == this.isOpenIndex) {
        this.isShowMention = !this.isShowMention;
      } else {
        this.$emit("chardChange", this.index);
      }
    },
    /*
     *用户提币通道的请求
     */
    reqChannel(coin) {
      let param = {
        CoinType: coin
      };
      console.log("用户提币通道的请求参数", param);
      param = JSON.stringify(param);
      param = this.$encryptByDES(param);
      this.axios
        .post(this.$baseURL + "/asset/trunoverchannel", { data: param })
        .then(res => {
          this.loading = false;
          if (res.data.Code == 200) {
            if (res.data.Data) {
              let data = this.$decryptByDES(res.data.Data);
              data = JSON.parse(data);
              console.log("接受到的数据", data);
              this.ChannelInfo = data;
              this.menthionForm.rate = data.PickRate;
              this.ChannelInfo.CoinMax = data.CoinMax
                ? data.CoinMax
                : data.Coin;
              console.log("当前的最大限额", this.ChannelInfo.CoinMax);
              // 取默认的第一条数据，进行一次默认的点击渲染
              this.mentionClick(0);
            }
          } else {
            /*
             *无提币信息，进行置空处理
             */
            this.ChannelInfo = {
              AssetInfo: [{ ChannelName: "" }],
              Coin: 0,
              CoinMax: 0,
              CoinMin: 0,
              Length: 8,
              PickRate: 0 //費率
            };
            this.$message.error(res.data.Msg);
          }
        });
    },
    // 用户输入，费率计算
    numInput(e, num) {
      this.$nextTick(() => {
        let point = e.target.value;

        if (point.indexOf(".") != -1) {
          point = point.split(".");
          if (point[1].length >= num) {
            this.menthionForm.num =
              (point[0] + "." + point[1].substring(0, num)) * 1;
          } else {
          }
        } else {
        }
        if (this.menthionForm.num <= this.ChannelInfo.PickRate) {
          this.menthionForm.rate = this.$coin(this.ChannelInfo.PickRate);
          this.menthionForm.autual = 0;
        } else {
          this.menthionForm.rate = this.$coin(this.ChannelInfo.PickRate);
          this.menthionForm.autual = this.$coin(
            this.$cir(this.menthionForm.num, this.menthionForm.rate)
          );
        }
      });
    },
    copyBtn() {
      let copyText = this.$refs.adress;
      copyText.select(); // 选择对象
      document.execCommand("Copy");
    },
    /*
     *提币的请求提交
     */
    confirmBtn() {
      if (this.isClick) {
        let _this = this;
        _this.$refs.methionform.validate(function(va, ob) {
          if (va) {
            // 获取需要传入的参数，请求数据
            let param = {
              ChannelId: _this.ChannelId * 1,
              CoinTotal: _this.menthionForm.num * 1,
              CoinAddress: _this.menthionForm.adress,
              CoinType: _this.item.AccountType * 1,
              PayPassword: _this.$md5(_this.menthionForm.moneyPsw),
              RealCoin: _this.menthionForm.autual * 1,
              ServiceCharge: _this.menthionForm.rate * 1
            };
            console.log("请求的参数", param);
            param = JSON.stringify(param);
            param = _this.$encryptByDES(param);
            //
            _this.isClick = false;
            _this.axios
              .post(_this.$baseURL + "/asset/pickcoin", { data: param })
              .then(res => {
                _this.isClick = true;
                if (res.data.Code == 200) {
                  _this.successMsg(res.data.Msg);
                  /*
                   *提币成功，重新请求可用数量，清空表单
                   */
                  _this.reqChannel(param.ChannelId);
                  _this.$refs.methionform.resetFields();
                  _this.$emit("refreshList");
                } else {
                  _this.errorMsg(res.data.Msg);
                }
              });
          } else {
            _this.errorMsg(`${_this.$t("regist.form_hint")}`);
          }
        });
      }
    },
    dialogClosed() {
      this.$refs.methionform.resetFields();
      this.pwdType = true;
    },
    // 生成二维码
    //生成的二维码内容，可以添加变量
    useqrcode(val) {
      if (val) {
        let _this = this;
        _this.QueryDetail = val;
        var canvas = _this.$refs.canvas;
        QRCode.toCanvas(canvas, _this.QueryDetail, function(error) {
          if (error) _this.$message.error("二维码加载错误，请重新尝试");
        });
      }
    },
    /*
     *充币按钮的点击，需要请求充币地址
     */
    changeMoneyClick(coin) {
      if (!this.isShow) {
        let param = {
          CoinType: coin
        };
        param = JSON.stringify(param);
        param = this.$encryptByDES(param);
        this.axios
          .post(this.$baseURL + "/asset/coinaddress", { data: param })
          .then(res => {
            this.loading = false;
            if (res.data.Code == 200) {
              if (res.data.Data) {
                let data = this.$decryptByDES(res.data.Data);
                data = JSON.parse(data);
                this.MentionInfo = data;
                this.ServerAddressInfo = data.ServerAddressInfo;
                // 取默认的第一条数据，进行一次默认的点击渲染
                this.coinClick(0);
              }
            }
          });
      }

      /*
       *卡片列表的处理事件
       */
      this.isDialog = 0;
      this.isShowMention = false;
      if (this.index == this.isOpenIndex) {
        this.isShow = !this.isShow;
      } else {
        this.$emit("chardChange", this.index);
      }
    },
    coinClick(index) {
      if (this.item.AccountName == "BTC") {
        this.ChannelId = 4;
        this.currentAdress = this.MentionInfo.ServerAddress;
      } else {
        this.currentChain = this.ServerAddressInfo[index]
          ? this.ServerAddressInfo[index].ChannelName
          : "";
        this.currentAdress = this.ServerAddressInfo[index]
          ? this.ServerAddressInfo[index].ServerAddress
          : "";
      }
      this.useqrcode(this.currentAdress);
    },
    mentionClick(index) {
      console.log("当前提币按钮的点击", index);
      if (this.item.AccountName == "BTC") {
        this.ChannelId = 4;
      } else {
        this.mentionChain = this.ChannelInfo.AssetInfo[index]
          ? this.ChannelInfo.AssetInfo[index].ChannelName
          : "";
        this.ChannelId = this.ChannelInfo.AssetInfo[index]
          ? this.ChannelInfo.AssetInfo[index].ChannelId
          : "";
      }
    }
  },

  computed: {},

  created() {},

  mounted() {
    this.coinClick(0);
  },
  watch: {
    isOpenIndex: function() {
      if (this.index == this.isOpenIndex) {
        if (this.isDialog == 0) {
          this.isShow = true;
        } else {
          this.isShowMention = true;
        }
      } else {
        if (this.isDialog == 0) {
          this.isShow = false;
        } else {
          this.isShowMention = false;
        }
      }
    }
  }
};
</script>
<style scoped>
.list-box {
  width: 100%;
  height: 50px;
  display: flex;
  border-bottom: solid 1px #f0f2f5;
  padding: 0 29px;
}
.list-box:hover {
  background-color: #f7fbfa;
}
.lump-box {
  display: flex;
  align-items: center;
}
.action-box {
  color: #eaa53b;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
}
.tinge-text {
  color: #999999;
}
.action-span {
  /* width:23px; */
  margin-left: 13px;
  color: #31c0ce;
}
.otc-hint {
  font-size: 14px;
  color: #333333;
  text-align: center;
  padding: 8px 0;
}
.otc-hint:hover {
  color: #31c0ce;
}
.el-popover {
  width: 51px !important;
}
.dialog-box {
  width: 100%;
  padding: 17px 19px 52px 19px;
  color: #333333;
  /* box-shadow: 1px 1px 2px 1px rgb(221, 219, 219); */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  z-index: 2;
  transition: all 0.3s;
}
.chunk-box {
  margin-bottom: 30px;
}
.chunk-box-hint {
  color: #999999;
  font-size: 12px;
  line-height: 12px;
}
.chunk-text-hint {
  color: #ec6b5d;
}
.chunk-box-img {
  width: 90%;
  height: 80%;
  margin: 0px auto;
  display: block;
}
.adress-box {
  width: 814px;
  height: 48px;
  margin-top: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 1px #eeeeee;
  padding: 0 21px;
}
.copy-input {
  color: #333333;
  font-size: 16px;
  width: 80%;
  /* height:48px; */
  border: none;
}
.adress-right-text {
  font-size: 14px;
  color: #31c0ce;
  margin-left: 30px;
  display: inline-block;
}
.erwei_img {
  width: 120px !important;
  height: 120px !important;
  margin: 0 auto;
}
.chunk-box-bottom {
  color: #cccccc;
  font-size: 12px;
  letter-spacing: 1px;
}
.chunk-box-bottom-hint {
  margin-bottom: 18px;
}
.hint-ul {
  padding: 0 10px;
}
.hint-li {
  line-height: 16px;
  width: 450px;
  margin: 10px 0px;
  list-style: disc;
}

/* 改版充币 */
.eye-img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
}
.support-box {
  display: flex;
  margin: 13px 0 20px 0;
}
.coin-btn {
  width: 134px;
  height: 48px;
  border-radius: 4px;
  background-color: #f5f3f9;
  border: solid 1px #eeeeee;
  margin-right: 44px;
  font-size: 14px;
  color: #333333;
  position: relative;
}
.coinIsClick {
  border: solid 1px #54c9c4;
}
.triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 28px solid #31c0ce;
  border-left: 28px solid transparent;

  line-height: 28px;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
}
.el-icon-check {
  color: #fff;
  position: absolute;
  right: 1px;
  bottom: 2px;
  font-weight: bold;
}
.btnDis {
  color: #c4c2c2;
}
/* 提币地址 */
.meation-form {
  width: 814px;
}
.risk-hint {
  background-color: #fdf0ef;
  border: solid 1px #c9655d;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  padding: 19px 25px 16px 19px;
  margin-bottom: 19px;
}
.el-icon-warning {
  color: #c9655d;
  background-color: #fff;
  /* overflow: hidden; */
  display: block;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 15px;
  border-radius: 50%;
  position: relative;
  top: 2px;
  margin-right: 12px;
}
.header-hint {
  color: #666666;
  font-size: 12px;
  line-height: 20px;
}
.header-hint p {
  display: inline-block;
}
.toup-adress-hint {
  display: flex;
  justify-content: space-between;
  height: 35px;
  color: #999999;
  font-size: 12px;
  line-height: 25px;
}
.right-last-box {
  margin-left: 32px;
}
.color-text {
  color: #31c0ce;
}
.inline-input-box {
  display: flex;
  justify-content: space-between;
}
.inline-item {
  width: 398px;
  position: relative;
}
.col-test {
  width: 398px;
  position: relative;
}
.inline-input {
  width: 398px;
}
.inline-hint-box {
  display: flex;
  width: 398px;
}
.input-hint-cointype {
  position: absolute;
  color: #999999;
  font-size: 12px;
  right: 15px;
  display: inline-block;
  bottom: 0px;
}
.footer-box-left {
  color: #cccccc;
  font-size: 12px;
  width: 380px;
}
.footer-left-text {
  margin-top: 19px;
  line-height: 18px;
  display: inline-block;
}
.toup-adress-foooter {
  display: flex;
  justify-content: space-between;
}
.footer-box-right {
  width: 200px;
  padding-top: 10px;
}
.footer-inline-item {
  width: 150px;
  float: right;
}
.footer-inline-input {
  width: 150px;
}
.toup-form-btn {
  width: 150px;
  height: 46px;
  background-color: #31c0ce;
  border: none;
  float: right;
}
.toup-form-btn:hover {
  background-color: #53d5e0;
}
.toup-form-btn:focus {
  background-color: #53d5e0 !important;
}
.eye-img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
}
</style>
